<script setup lang="ts">
import PersonModule1 from '@/components/PersonModule1.vue';
import PersonModule2 from '@/components/PersonModule2.vue';
import TheGround from '@/components/life/TheGround.vue';
import TheTree from '@/components/life/TheTree.vue';
import { ref } from 'vue';
const tallYou = ref<string>('不要气馁哈，给你花花')

</script>

<template>
  <main>
    <!-- 左边人 -->
    <div class="person1">
      <PersonModule1 />

      <!-- 左边人说话气泡 -->
      <div class="bubble">
        <span>{{ tallYou }}</span>

        <div class="arrow"></div>
      </div>
    </div>


    <!-- 右边人 -->
    <div class="person2">
      <PersonModule2 />
    </div>

    <!-- 背景 -->
    <div class="backgroud">
      <!-- 树木 -->
      <div class="trees_box">
        <TheTree />
      </div>

      <!-- 地面 -->
      <div class="ground_box">
        <TheGround />
      </div>

      <!-- 留白 -->
      <div class="white"></div>
    </div>

  </main>
</template>

<style lang='scss' scoped>
main {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #4b4b4b;

  .person1 {
    position: absolute;
    left: 37%;
    bottom: 50rem;

    width: 80rem;
    z-index: 10;

    .bubble {
      position: absolute;
      top: -20rem;
      left: 110rem;

      display: flex;
      justify-content: center;
      align-items: center;

      width: 120rem;
      height: 40rem;
      border-radius: 50%;
      border: 1rem solid #333;

      background-color: #fff;
      color: #333;
      font-size: 8rem;
      text-align: center;
      // line-height: 40rem;

      .arrow {
        position: absolute;
        bottom: 3rem;
        left: 10rem;

        width: 10rem;
        height: 6rem;

        border-left: 1rem solid #333;
        border-bottom: 1rem solid #333;
        background-color: #fff;

        transform: rotate(-10deg);
      }
    }

  }


  .person2 {
    position: absolute;
    right: 37%;
    bottom: 50rem;

    width: 80rem;
    z-index: 9;
  }

  .backgroud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 0;
    background-color: #ff9165;

    .ground_box {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20rem;

      height: 160rem;
      overflow: hidden;
    }

    .trees_box {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 180rem;

      height: 160rem;

      overflow: hidden;
    }

    .white {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 20rem;
      background-color: rgb(73, 206, 95);
    }

  }
}


@media (max-width: 768px) {
  main {
    .backgroud {
      .ground_box {
        bottom: 60rem;
        height: 260rem;
      }

      .trees_box {
        bottom: 320rem;
        height: 360rem;
      }

      .white {
        height: 60rem;
      }
    }

    .person1 {
      width: 25%;
      left: 20%;
      bottom: 100rem;

      .bubble {
        left: 220rem;

        span {
          white-space: nowrap;
          transform: scale(.6);
        }
      }
    }

    .person2 {
      width: 25%;
      right: 20%;
      bottom: 100rem;
    }
  }
}

@media (max-width: 600px) {
  main {
    .person1 {
      .bubble {
        span {
          transform: scale(.5);
        }
      }
    }
  }
}
</style>